<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/31
  Time: 21:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <style>
        .header-middle{
            width: 100%;
            height: 40px;
            text-align: center;
            background-color: #f2751f;
            box-sizing: border-box;
        }
        .header-middle-first{
            width: 21%;
            text-align: right;
            /* border: 1px solid #000000; */
        }
        .header-middle-mid{
            width: 6%;
            text-align: right;
            /* padding-right: 3px;
            box-sizing: border-box; */
        }
        .header-middle-end{
            width: 49%;
            /* border: 1px solid #000000; */
        }
        .header-middle a{
            text-decoration: none;
            color: white;
            font-size: 15px;
            /* border: 1px solid #000000; */
            /* padding-right: 3px; */
            margin-right: 10px;
            text-align: right;
            box-sizing: border-box;
        }
        .header-middle td{
            border-right: 1px solid #ffffff;
            /* text-align: center; */
        }
        .header-middle-mycart{
            width: 240px;
            height: 25px;
            margin-right: 380px;
            box-sizing: border-box;
            float: right;
            /* text-align: right; */
            background-color: whitesmoke;
        }

        .header-middle-mycart-left>img{
            height: 25px;
            float: left;
        }
        .header-middle-mycart-right{
            background-color: orange;
            border-radius: 7px;
            border-right: 0;

        }
        .header-middle-mycart-mid{
            border-right: 1px solid #848484;

        }
        .header-middle-mycart-mid>a{
            color: #000000;
        }
        .header-middle-mycart td{
            border-right: 0px solid beige;
        }
    </style>
</head>
<body>

<table class="header-middle" cellspacing="13">
    <tr >
        <td class="header-middle-first" id="Categorylist">
            <a href="${pageContext.request.contextPath}">首页</a>
        </td>
        <td class="header-middle-end">
            <table class="header-middle-mycart">
                <tr>
                    <td class="header-middle-mycart-left">
                        <img src="${pageContext.request.contextPath}/img/cart_logo1.jpg" />
                    </td>
                    <td class="header-middle-mycart-mid">
                        <a href="${pageContext.request.contextPath}/cart/findAllByUid">购物车<b name="mycary_nums" id="mycart_nums" style="color: red">
                           </b>件</a>
                    </td>
                    <td class="header-middle-mycart-right">
                        <a href="javascript:void(0)">去结算</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
<script>
    $(function () {
        /* 导航栏类型添加*/
        $.post("${pageContext.request.contextPath}/category/findAll","",function (data) {
            let strs = "";
            let goodsType = $("#goodsType");
            for (let i in data){
                strs =    '<td class="header-middle-mid">\n'+
                    //      修改分页为动态id分页
                    '  <a href="${pageContext.request.contextPath}/goods/findPageByCid?cid='+data[i].id+'&currentPage=1">'+data[i].name+'</a>\n'+
                    '</td>'
                $("#Categorylist").after(strs);
            }
        },"json")
        /*购物车订单数量显示*/
        $.post("${pageContext.request.contextPath}/cart/countOrder","",function (data) {
           $("#mycart_nums").append(data);
        })
    })

</script>
</html>
